<template>
  <!-- 卡片1 小方块-->
  <view v-if="styleId === 1" class="">
    <navigator class="card-item1" target="" :url="`/pages/search/particulars/index?id=${data.id}`"
      hover-class="navigator-hover" open-type="navigate">
      <view class="oneMes" @click="() => {
        postTopGuestsAPI(data)
      }">
        <view class="imageItem">
          <image class="image"
            style="border-radius: 25px 25px 0 0;"
            :src="['.jpg', '.jpeg', '.png', '.gif', '.webp'].some(item => data.avatar.endsWith(item)) ? data.avatar : '/static/tabs/user_default.png'"
            mode="aspectFit|aspectFill|widthFix" lazy-load="false">
          </image>
        </view>
        <view class="posi">
          <view class="name">
            <text selectable="false" space="false" decode="false">
              {{ data.nickname }}
            </text>.<text  class="name-item">{{ data.age ? data.age : '暂无年龄' }}</text>
          </view>
          <view class="message" hover-class="none" hover-stop-propagation="false">
           {{
              data.my_city.length > 0 ? data.my_city : '暂无地区'
            }}
          </view>
        </view>

      </view>
    </navigator>
  </view>
  <!-- 卡片2 大长方块-->
  <view class="card-item2" v-else> </view>
</template>

<script setup lang="ts">
import type { TopGuests } from '@/types/index/home'
import { ref } from 'vue'
import { postTopGuestsAPI } from "@/services/index/home";
import { url } from 'inspector';
defineProps<{ styleId: number; data: TopGuests }>()

</script>

<style scoped lang="scss">
.card-item1 {
  width: 300rpx;
  height: 350rpx;
  position: relative;
  margin: 30rpx 20rpx 40rpx 20rpx;
  box-shadow: 2rpx 5rpx 10rpx -2rpx #dbdbdb;
  border-radius:25px 25px 0 0;
  background-color: white;
  .oneMes {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .imageItem {
      width: 100%;
      height: 100%;
      
      // background-color: #f093ad;
      image{
        border-radius:25px 25px 0 0;
      }


    }

  }
  .posi{
    position: absolute;
    background-color: white;
    width: 100%;
    bottom: 0;
    height: 65px;
    border-radius: 10px 10px 0 0;
    padding: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    .message{
      margin-top: 10px;
      font-size: 10px;
    }
    .name-item{
      font-size: 14px;
    }
  }
}

.card-item2 {
  width: 700rpx;
  height: 400rpx;
  border-radius: 30rpx;
  margin: 50rpx 20rpx 20rpx 20rpx;
  box-shadow: 2rpx 5rpx 10rpx -2rpx #dbdbdb;
  background-color: #f9d1da;
}
</style>
